<template>
  <div class="container">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="文章标题:" prop="title">
        <el-input v-model="ruleForm.title"></el-input>
      </el-form-item>

      <el-form-item label="文章内容:" prop="articleBody">
        <quillEditor v-model="ruleForm.articleBody" :options="editorOption"></quillEditor>
      </el-form-item>

      <el-form-item label="视频地址:">
        <el-input v-model="ruleForm.videoURL"></el-input>
      </el-form-item>

      <el-row>
        <el-col>
          <el-form-item>
            <el-button @click="cancelFn">取消</el-button>
            <el-button type="primary" @click="submitForm">确定</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
import { add, detailAPI, update } from '@/api/hmmm/articles.js'

export default {
  data () {
    return {
      ruleForm: {
        title: null,
        articleBody: null,
        videoURL: null
      },
      rules: {
        title: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        articleBody: [{ required: true, message: '请输入活动名称', trigger: 'blur' }]
      },
      editorOption: {
        placeholder: '请在这里输入',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['blockquote', 'code-block'], // 引用，代码块
            ['image', 'link'] // 上传图片、上传视频
          ]
        }
      }
    }
  },
  created () {
    // console.log(this.articleDetail)
    if (this.isEdit) {
      this.getArticleDetail()
    } else {
      this.ruleForm = {
        title: null,
        articleBody: null,
        videoURL: null
      }
    }
  },
  props: {
    // articleDetail: {
    //   required: true,
    //   type: Object
    // }
    articleId: {
      required: true
    },
    isEdit: {
      required: true,
      type: Boolean
    }

  },
  components: {
    quillEditor
  },
  methods: {
    // 提交 添加
    submitForm () {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          if (this.isEdit) {
            await update(this.ruleForm)
            this.$emit('success')
            this.$message.success('操作成功')
          } else {
            await add(this.ruleForm)
            // const res = await add(this.ruleForm)
            // console.log(res)
            this.$emit('success')
            this.$message.success('操作成功')
          }
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    },

    // 取消 按钮
    cancelFn () {
      this.$emit('close')
    },

    // 获取 文章 详情
    async  getArticleDetail () {
      const res = await detailAPI(this.articleId)
      console.log(res)
      this.ruleForm = res.data
      // console.log(this.isEdit)
    }

  }
}
</script>

<style scoped >
.position {
  position: fixed;
  right: 0;
}
::v-deep .ql-editor {
height: 200px;
}
</style>
